<template>
  <el-form 
    label-width="100px" 
    :rules="rules" 
    :model="model" 
    ref="formRef">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" v-model="model.username"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="model.password"/>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="选择城市" prop="city">
            <el-select v-model="model.city" placeholder="请选择城市">
              <el-option
                v-for="option in citys"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
        </el-form-item>
      </el-col>
      
      <el-col :span="24">
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" rows="2" placeholder="请输入描述" v-model="model.description"/>
        </el-form-item>
      </el-col>

      <el-col :span="2">
        <el-form-item >
          <el-button @click="submit" type="primary">提交</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item >
          <el-button @click="handleBack">返回</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts">
export default {
  name: "FormTest",
};
</script>

<script lang="ts" setup>
import { ref, reactive } from "vue";

const model = reactive({
  username: "",
  password: "",
  city: "",
  description: "",
});

const citys = [
  {
    label: "武汉",
    value: "wh",
  },
  {
    label: "北京",
    value: "bj",
  },
  {
    label: "深圳",
    value: "sz",
  },
]

const rules = {
  // 表单校验规则的名称必须和数据名称一致
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码" }],
}

const formRef = ref();
const submit = async () => {
  // 进行表单校验
  await formRef.value.validate();
  alert(JSON.stringify(model))
};

const handleBack = () => {
  alert('点击返回...')
}
</script>

<style scoped></style>
